<div data-bind="modal: isShow" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-bind="click: reset"><i class="fa fa-close"></i></button>
                <h4 class="modal-title" data-bind="text: Kooboo.text.common.Relation"></h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th data-bind="text: Kooboo.text.common.name"></th>
                                <th data-bind="text: Kooboo.text.common.remark"></th>
                                <th class="table-action" data-bind="text: Kooboo.text.common.edit"></th>
                            </tr>
                        </thead>
                        <!-- ko ifnot: loading -->
                        <!-- ko if: relations().length -->
                        <tbody data-bind="foreach: relations">
                            <tr>
                                <td>
                                    <a data-bind="text: $data.name, attr: { href: $data.url }, tooltip: Kooboo.text.common.preview, tooltipPlacement: 'right'" target="_blank"></a>
                                </td>
                                <td data-bind="text: $data.remark || '-'"></td>
                                <td>
                                    <a data-bind="visible: !!$parent.getRelationEditUrl($data), attr: { href: $parent.getRelationEditUrl($data) }" target="_blank" class="btn btn-xs blue"><i class="fa fa-pencil"></i></a>
                                </td>
                            </tr>
                        </tbody>
                        <!-- /ko -->
                        <!-- ko ifnot: relations().length -->
                        <tbody>
                            <tr>
                                <td colspan="100" class="text-center" data-bind="text: Kooboo.text.common.empty"></td>
                            </tr>
                        </tbody>
                        <!-- /ko -->
                        <!-- /ko -->
                        <tfoot data-bind="visible: loading">
                            <tr>
                                <td colspan="100" class="text-center">
                                    <i class="fa fa-spinner fa-spin"></i>
                                    <!-- ko text: Kooboo.text.common.loading -->
                                    <!-- /ko -->
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button data-bind="click: reset, text: Kooboo.text.common.OK" class="btn btn-default"></button>
            </div>
        </div>
    </div>
</div>